<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      class Animal {
        // 构造函数 定义属性
        constructor(name) {
          this.name = name;
        }
        // 原型方法
        // Animal.prototype.getName = function(){}
        getName() {
          return this.name;
        }
      }
      class Dog extends Animal {
        constructor(name, age) {
          // 子类存在构造函数,需要在使用 this 之前  调用 super()
          super(name);
          this.age = age;
        }
      }
      var dog1 = new Dog("张三", 24);
      console.log(dog1);

      // 编译成 es5 寄生组合式继承
      function _possibleConstructorReturn(self, call) {
        // ...
        return call && (typeof call === "object" || typeof call === "function")
          ? call
          : self;
      }
      function _inherits(subClass, superClass) {
        // 这里可以看到
        subClass.prototype = Object.create(superClass && superClass.prototype, {
          constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true,
          },
        });
        if (superClass)
          Object.setPrototypeOf
            ? Object.setPrototypeOf(subClass, superClass)
            : (subClass.__proto__ = superClass);
      }

      var Parent = function Parent() {
        // 验证是否是 Parent 构造出来的 this
        _classCallCheck(this, Parent);
      };
      var Child = (function (_Parent) {
        _inherits(Child, _Parent);
        function Child() {
          _classCallCheck(this, Child);
          return _possibleConstructorReturn(
            this,
            (Child.__proto__ || Object.getPrototypeOf(Child)).apply(
              this,
              arguments
            )
          );
        }
        return Child;
      })(Parent);
    </script>
  </body>
</html>
